<template>
    <div>
        <van-nav-bar
                title="影院"
                @click-left="onClickLeft"
                @click-right="onClickRight"
        >
            <template #left>
                {{$store.state.cityName}}<van-icon name="arrow-down" />
            </template>
            <template #right>
                <van-icon name="search" size="18" />
            </template>
        </van-nav-bar>
        <div class="cinema" :style="{height:height}">
            <ul>
                <li v-for="(item,index) in $store.state.cinemaList" :key="item.cinemaId">
                    {{item.name}}
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import vue from 'vue'
    import axios from 'axios'
    import betterscroll from 'better-scroll'
    import { NavBar,Icon,Toast} from 'vant';
    vue.use(NavBar).use(Icon).use(Toast)
    export default {
        data(){
            return{
                height:0,
                myList:[],
            }
        },
        // components:{
        //     betterscroll,
        // },
        mounted() {
            this.height=document.documentElement.clientHeight - 96 + 'px';
            if(this.$store.state.cinemaList.length === 0){
                console.log('看看列表',this.$store.state.cinemaList)
                console.log('看看列表 城市ID',this.$store.state.cityID)
                    //请求
                this.$store.dispatch('getCinemaList',this.$store.state.cityID).then(res=>{
                    console.log('看看在 res里面',this.myList);
                    this.$nextTick(()=>{
                        new betterscroll('.cinema',{
                            scrollbar:{
                                fade: true,
                            },
                        });
                    });
                });
                console.log('看看列表2222222',this.myList)
            }else{

                console.log('缓存')
                this.$nextTick(()=>{
                    new betterscroll('.cinema',{
                        scrollbar:{
                            fade: true,
                        },
                    });
                });
            }
            // axios({
            //     url:`https://m.maizuo.com/gateway?cityId=${this.$store.state.cityID}&ticketFlag=1&k=5184233`,
            //     headers:{
            //         'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1614558948631982962769921","bc":"310100"}',
            //         'X-Host': 'mall.film-ticket.cinema.list',
            //         'X-Requested-With': 'XMLHttpRequest',
            //     },
            // }).then(res=>{
            //     console.log('影院结果',res.data.data.cinemas);
            //     this.cinema=res.data.data.cinemas;
            //
            //     this.$nextTick(()=>{
            //         new betterscroll('.cinema',{
            //             scrollbar:{
            //                 fade: true,
            //             },
            //         });
            //     });
            // }).catch(err=>{
            //     console.log('错误',err);
            // })

        },
        methods:{
            onClickLeft(){
                this.$store.commit("clearCinemaList");
                this.$router.push('/city')
            },
            onClickRight(){
                // Toast('点击了右边')
                this.$router.push('/cinema/search')
            },
        }
    }

</script>

<style scoped>
        .cinema{overflow: hidden;position: relative;}
</style>